<template>
  <view>
    <view
        v-if="show"
        @click="close"
        class="back"></view>
    <u-popup
        mode="bottom"
        bgColor="rgba(0,0,0,0)"
        overlay-opacity="0"
        zIndex="999999"
        :show="show" @close="close" @open="open"
    >

      <view class="box">
        <view style="height: 20rpx"></view>
        <view class="title">
          绩效
        </view>
        <view style="height: 20rpx"></view>
        <scroll-view
            style="max-height: 1000rpx"
            scroll-y>
          <view class="in-box">
            <view>年份</view>
            <view>
              <input
                  type="number"
                  @change="yearChange"
                  v-model="params.year"
                  placeholder="请输入年份">
              </input>
            </view>
          </view>
          <view class="in-box">
            <view>绩效分数</view>
            <view>
              <input
                  type="digit"
                  @change="scoreChange"
                  v-model="params.score"
                  placeholder="请输入绩效">
              </input>
            </view>
          </view>
          <!-- 上半年评分 -->
          <view class="in-box">
            <view>上半年评分</view>
            <view>
              <view
                  v-for="item in $talent.get.getPerformanceLevelList()"
                  class="btn"
                  @click="setFirstHalfLevel(item.level)"
                :class="{'btn-active':item.level===params.firstHalfLevel}"
              >
                {{item.name}}
              </view>

            </view>
          </view>
          <!-- 下半年评分 -->
          <view class="in-box">
            <view>下半年评分</view>
            <view>
              <view
                  v-for="item in $talent.get.getPerformanceLevelList()"
                  @click="params.secondHalfLevel=item.level;$forceUpdate()"
                  class="btn"
                :class="{'btn-active':item.level===params.secondHalfLevel}"
              >
                {{item.name}}
              </view>
            </view>
          </view>
        </scroll-view>
        <view style="height: 20rpx"></view>
        <view
            @click="change"
            class="to-btn">确定</view>

      </view>


    </u-popup>
  </view>
</template>

<script>
import $talent from "@/js/talent";

export default {
  props: {
    userInfo:{
      type: Object,
      default: () => {
        return {
          gmtBirthday: 0,
          genderCode:"male"
        };
      }
    }
  },
  watch: {
    // 监听分数
    "params.score": {
      handler: function (val) {
        // 如果分数大于5，设置为5
        if(val>5){
          this.params.score = 5;
        }
        // 如果分数小于0，设置为0
        if(val<0){
          this.params.score = 0;
        }
      },
      deep: true
    },
  },

  data() {
    return {
      show: false,
      mode: "single",
      indexIndex: 0,
      params: {
        year: null,
        score: null,
        firstHalfLevel: null,
        secondHalfLevel: null,
      },
      $talent: $talent,
      isAdd: false
    };
  },
  mounted() {
  },
  methods:{
    setFirstHalfLevel(level){
      this.params.firstHalfLevel = level;
      console.log(this.params.firstHalfLevel);
      this.$forceUpdate();
    },
    open(index){
      if(index===0||index) {
        this.isAdd = false;
        this.indexIndex = index;
        console.log(this.userInfo.talentPerformancesOfUserAccount[this.indexIndex]);
        this.params = JSON.parse(JSON.stringify(this.userInfo.talentPerformancesOfUserAccount[this.indexIndex]));
        // 如果没有上半年评分，初始化为0
        if(!this.params.firstHalfLevel){
          this.params.firstHalfLevel = 2;
        }
        // 如果没有下半年评分，初始化为0
        if(!this.params.secondHalfLevel){
          this.params.secondHalfLevel = 2;
        }
        this.show = true;
        this.$emit("open");
      }
    },
    yearChange(){
      if(this.params.year){
        let val = parseInt(this.params.year);
        if(!val){
          return;
        }
        try {
          if (val > new Date().getFullYear()) {
            this.params.year = new Date().getFullYear();
          } else if (val < 1949) {
            this.params.year = 1949;
          }
        }catch (e){}
      }
    },
    scoreChange(){
      if(this.params.score){
        let val = parseInt(this.params.score);
        if(!val){
          return;
        }
        try {
          if (val > 5) {
            this.params.score = 5;
          } else if (val < 0) {
            this.params.score = 0;
          }
        }catch (e){}
      }
    },
    openOfAdd() {
      this.isAdd = true;
      this.show = true;
      this.params = {
        year: null,
        score: null,
        firstHalfLevel: null,
        secondHalfLevel: null,
      };
      this.$emit("open");
      this.isAdd = true;
    },
    close(){
      this.show = false;
      this.$emit("close");
    },
    change(){
      setTimeout(()=>{
        console.log(this.isAdd);
        this.$emit("change",this.params,this.indexIndex,this.isAdd);
      },100);
      this.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.back{
  position: fixed;
  z-index: 999999;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box{
  position: relative;
  background-color: #FFFFFF;
  padding: 0 20rpx 20rpx 20rpx;
  box-shadow: 0 10rpx 10rpx rgba(118, 118, 118, 0.1);
  border-radius: 20rpx 20rpx 0 0;
  text-align: center;
}

.in-box{
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 33rpx;
  letter-spacing: 2rpx;

  .btn{
    display: inline-block;
    padding: 10rpx 20rpx;
    border: 1rpx solid #999999;
    border-radius: 20rpx;
    margin: 10rpx;
  }
}

//.in-box:active{
//  opacity: .5;
//}
.text{
  position: absolute;
  display: inline-block;
  right: 0;
  font-size: 22rpx;
}

.to-btn{
  padding: 20rpx;
  border-radius: 20rpx;
  margin: 10rpx;
  background-color: #17A095;
  color: #FFFFFF;
}

.to-btn:active{
  opacity: .5;
}

.btn-active{
  background-color: #17A095;
  border: 1rpx solid #17A095;
  color: #FFFFFF;
}
</style>
